<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-07-01 15:47:42
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-12-10 16:52:41
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group flex">
                        <label for="materialCode">图号*</label>
                        <input style="margin-left: 35px;" id="materialCode" #materialCodeInput="ngModel" type="text"
                            name="materialCode" class="form-control" [(ngModel)]="form.materialCode" required
                            maxlength="256" />
                        <validation-messages [formCtrl]="materialCodeInput"></validation-messages>
                        <label for="materialName" style="margin-left: 50px;">物料名称*</label>
                        <input style="margin-left: 10px;" id="materialName" #materialNameInput="ngModel" type="text"
                            name="materialName" class="form-control" [(ngModel)]="form.materialName" required
                            maxlength="256" />
                        <validation-messages [formCtrl]="materialNameInput"></validation-messages>
                    </div>
                    <div class="form-group flex">
                        <label for="model" style="margin-top: 5px;width: 58.02px;">规格型号</label>
                        <input style="margin-left: 10px;" id="model" type="text" name="model"
                            class="form-control" [(ngModel)]="form.model" maxlength="256" />
                        <label style="margin-top: 5px;margin-right: 35px; margin-left: 50px;">单位*</label>
                        <p-dropdown name="unit" required [options]="unitOption" #unitSelect="ngModel" [(ngModel)]="form.unit">
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                    style="vertical-align:middle; margin-left: .5em;width: 200px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                        <validation-messages [formCtrl]="unitSelect"></validation-messages>
                    </div>
                    <div class="form-group flex">
                        <label style="margin-top: 5px;margin-right: 10px;">物料类别*</label>
                        <p-dropdown required (onChange)="onChange($event)" name="materialType" #materialTypeSelect="ngModel"
                            [options]="materialTypeOption" [(ngModel)]="form.materialType">
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                    style="vertical-align:middle; margin-left: .5em;width: 200px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                        <validation-messages [formCtrl]="materialTypeSelect"></validation-messages>
                        <label style="margin-top: 5px;margin-left: 50px;margin-right: 10px;">细分类别*</label>
                        <p-dropdown name="materialCategoryId" #materialCategoryIdSelect="ngModel"
                            [options]="materialCategoryOption" [(ngModel)]="form.materialCategoryId" required>
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                    style="vertical-align:middle; margin-left: .5em;width: 200px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                        <validation-messages [formCtrl]="materialCategoryIdSelect"></validation-messages>

                    </div>
                    <div class="form-group flex">
                        <label style="margin-top: 5px;margin-right: 10px;">物料属性*</label>
                        <p-dropdown name="materialProperty" #materialPropertySelect="ngModel" required
                            [options]="materialPropertyOption" [(ngModel)]="form.materialProperty">
                            <ng-template let-select pTemplate="selectedItem">
                                <span
                                    style="vertical-align:middle; margin-left: .5em;width: 200px;">{{select.label}}</span>
                            </ng-template>
                            <ng-template let-select pTemplate="select">
                                <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
                                    <div style="font-size:14px;float:right;margin-top:4px;width: 200px;">
                                        {{select.label}}</div>
                                </div>
                            </ng-template>
                        </p-dropdown>
                        <validation-messages [formCtrl]="materialPropertySelect"></validation-messages>
                        <label style="margin-top: 5px; margin-left: 50px;">批次*</label>
                        <input style="margin-left: 35px;" id="batch" #batchInput="ngModel" type="text" name="batch"
                            class="form-control" [(ngModel)]="form.batch" required maxlength="256" />
                        <validation-messages [formCtrl]="batchInput"></validation-messages>
                        <!-- <label style="margin-top: 5px;margin-left: 70px;" for="isHinge">是否关键件*</label>
                        <p-toggleButton name="isHinge" style="margin-left: 40px" [(ngModel)]="form.isHinge" onLabel="是" offLabel="否" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'150px'}"></p-toggleButton> -->
                    </div>
                    <div class="form-group">
                        <label style="margin-top: 5px;">是否启用*</label>
                        <p-toggleButton name="isPip" style="margin-left: 40px" [(ngModel)]="form.isUsed" onLabel="使用"
                            offLabel="停用" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width':'150px'}">
                        </p-toggleButton>
                    </div>
                    <div class="form-group">
                        <label for="remark">备注</label>
                        <input style="margin-left: 10px;" id="remark" type="text" name="remark" class="form-control"
                            [(ngModel)]="form.remark" maxlength="256" />
                    </div>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">取消</button>
                    <button type="submit" class="btn btn-primary" [disabled]="!bopForm.form.valid" [buttonBusy]="saving"
                        [busyText]="l('SavingWithThreeDot')"><i class="fa fa-save"></i> <span>保存</span></button>
                </div>
            </form>
        </div>
    </div>
</div>